﻿$('#Country').change(function () {
    var selectedCountry = $(this).val();
    clearCity();
    clearArea();
    clearZone();
    if (selectedCountry != null && selectedCountry != '') {
        $.getJSON('@Url.Action("Cities")', { countyId: selectedCountry }, function (cities) {
            var citySelect = $('#City');
            $.each(cities, function (index, city) {
                citySelect.append($('<option/>', {
                    value: city.Value,
                    text: city.Text
                }));
            });
        });
    }
});

function clearCity() {
    var citySelect = $('#City');
    citySelect.empty();
    citySelect.append($('<option/>', {
        value: "",
        text: "-------------Select City-------"
    }));
}
function clearArea() {
    var select = $('#Area');
    select.empty();
    select.append($('<option/>', {
        value: "",
        text: "-------------Select Area-------"
    }));
}
function clearZone() {
    var select = $('#Zone');
    select.empty();
    select.append($('<option/>', {
        value: "",
        text: "-------------Select Zone-------"
    }));
}
$('#City').change(function () {
    var selectedCity = $(this).val();
    clearArea();
    clearZone();
    if (selectedCity != null && selectedCity != '') {
        $.getJSON('@Url.Action("Areas")', { cityId: selectedCity }, function (areas) {
            var areaSelect = $('#Area');
            $.each(areas, function (index, area) {
                areaSelect.append($('<option/>', {
                    value: area.Value,
                    text: area.Text
                }));
            });
        });
    }
});
$('#Area').change(function () {
    var selectedArea = $(this).val();
    clearZone();
    if (selectedArea != null && selectedArea != '') {
        $.getJSON('@Url.Action("Zones")', { areaId: selectedArea }, function (zones) {
            var zoneSelect = $('#Zone');
            $.each(zones, function (index, area) {
                zoneSelect.append($('<option/>', {
                    value: area.Value,
                    text: area.Text
                }));
            });
        });
    }
});